<script setup lang="js">
import { onMounted } from 'vue';
import * as PIXI from 'pixi.js';

onMounted(() => {
    const app = new PIXI.Application(800, 600, { background: '#1099bb' });

    document.getElementById('pixi-CustomHitarea-container').appendChild(app.view);

    const yellowStar = PIXI.Texture.from('https://pixijs.com/assets/yellowstar.png');

    // Standard Sprite Button
    const starButton1 = new PIXI.Sprite(yellowStar);

    starButton1.position.set(50, 200);
    starButton1.cursor = 'pointer';
    starButton1.eventMode = 'static';

    starButton1
        .on('pointerdown', onClick, starButton1)
        .on('pointerover', onPointerOver, starButton1)
        .on('pointerout', onPointerOut, starButton1);

    // Custom Hitarea Button
    const starButton2 = new PIXI.Sprite(yellowStar);

    starButton2.position.set(250, 200);

    // Create a hitarea that matches the sprite, which will be used for point
    // intersection
    starButton2.hitArea = new PIXI.Polygon([
        80, 0, 100, 50, 160, 55, 115, 95, 130, 150, 80, 120, 30, 150, 45, 95, 0, 55, 60, 50,
    ]);
    starButton2.cursor = 'pointer';
    starButton2.eventMode = 'static';

    starButton2
        .on('pointerdown', onClick, starButton2)
        .on('pointerover', onPointerOver, starButton2)
        .on('pointerout', onPointerOut, starButton2);

    // With Mask, No Hit Area
    const starButton3 = new PIXI.Sprite(yellowStar);

    starButton3.position.set(450, 200);
    starButton3.cursor = 'pointer';
    starButton3.eventMode = 'static';

    const squareMask = new PIXI.Graphics().beginFill(0xffffff).drawRect(starButton3.x, starButton3.y, 75, 200).endFill();

    starButton3.mask = squareMask;

    starButton3
        .on('pointerdown', onClick, starButton3)
        .on('pointerover', onPointerOver, starButton3)
        .on('pointerout', onPointerOut, starButton3);

    // With a Mask and Hit Area
    // Hitareas ignore masks. You can still click on a button made in this way,
    // even from areas covered by a mask
    const starButton4 = new PIXI.Sprite(yellowStar);

    starButton4.position.set(600, 200);

    const squareMask2 = new PIXI.Graphics().beginFill(0xffffff).drawRect(starButton4.x, starButton4.y, 75, 200).endFill();

    starButton4.mask = squareMask2;

    // Again, hitarea for intersection checks
    starButton4.hitArea = new PIXI.Polygon([
        80, 0, 100, 50, 160, 55, 115, 95, 130, 150, 80, 120, 30, 150, 45, 95, 0, 55, 60, 50,
    ]);
    starButton4.cursor = 'pointer';
    starButton4.eventMode = 'static';

    starButton4
        .on('pointerdown', onClick, starButton4)
        .on('pointerover', onPointerOver, starButton4)
        .on('pointerout', onPointerOut, starButton4);

    const style = new PIXI.TextStyle({ fill: '#ffffff' });

    const text1 = new PIXI.Text('Standard', style);

    text1.x = starButton1.x + 25;
    text1.y = starButton1.y + 170;

    const text2 = new PIXI.Text('Hit Area', style);

    text2.x = starButton2.x + 35;
    text2.y = starButton2.y + 170;

    const text3 = new PIXI.Text('Mask', style);

    text3.x = starButton3.x + 10;
    text3.y = starButton3.y + 170;

    const text4 = new PIXI.Text('Mask + Hit Area', style);

    text4.x = starButton4.x - 10;
    text4.y = starButton4.y + 170;

    // Add to stage
    app.stage.addChild(starButton2, starButton1, starButton3, starButton4, squareMask, squareMask2, text1, text2, text3, text4);

    function onClick() {
        this.tint = 0x333333;
    }

    function onPointerOver() {
        this.tint = 0x666666;
    }

    function onPointerOut() {
        this.tint = 0xffffff;
    }
})


</script>

<template>
    <div id="pixi-CustomHitarea-container"></div>
</template>

<style scoped></style>
